<template>
  <el-scrollbar>

    <el-row style="margin-bottom: 20px;" v-for="item in tableData" :key="item.标题">
      <div>{{ item.标题 }}</div>
      <el-radio-group v-model="item.selectResult">
        <el-radio :label="'A'" class="radio-class">{{ item.选项A }}</el-radio>
        <el-radio :label="'B'" class="radio-class">{{ item.选项B }}</el-radio>
        <el-radio :label="'C'" class="radio-class">{{ item.选项C }}</el-radio>
        <el-radio :label="'D'" class="radio-class">{{ item.选项D }}</el-radio>
      </el-radio-group>
      <div style="color:red" v-if="!_.isEmpty(item.selectResult)&&!item.正确答案.includes(item.selectResult)">
        {{ `${item.正确答案}      ------      ${item.解析}` }}
      </div>


    </el-row>


  </el-scrollbar>


</template>
<script setup>
import {onMounted, ref} from "vue";
import _ from 'lodash'

let tableData = ref([])
const getData = () => {


  fetch("./question_data.json").then(res => {
    return res.json()
  }).then(res => {

    tableData.value = _.shuffle(res).slice(0, 100)
  })


}


onMounted(() => {
  getData()
})

</script>

<style scoped>

.radio-class {
  width: 100%;
}


</style>
